<template>
    <div style="height: 100vh">
        <HeaderTitle title="一大堆好题！" style="width: 4.5rem; margin: 3.5rem auto 0.5rem"></HeaderTitle>
        <n-carousel v-if="quizList.length > 0" :slides-per-view="showNum" :loop="false" :show-dots="false" draggable
                    class="recommend-quiz-box">
            <div class="quiz-item side-card glass" v-for="quiz in quizList" :key="quiz.id">
                <img class="user-avatar" :src="quiz.avatar" alt="user">
                <router-link to="/">
                    <div class="title">
                        <n-ellipsis style="max-width: 80%;">
                            {{ quiz.title }}
                            <template #tooltip>
                                <div style="text-align: center">
                                    {{ quiz.title }}
                                </div>
                            </template>
                        </n-ellipsis>
                    </div>
                    <div class="text">
                        {{ quiz.content }}
                    </div>
                </router-link>
                <div class="time">发布时间：{{ formatDateTime(quiz.createTime) }}</div>
            </div>
        </n-carousel>
    </div>
</template>

<script setup lang="ts">
import useStore from "@/store";
import {QuizRecommend} from "@/api/quiz/types";
import {getQuizRecommend} from "@/api/quiz";
import {formatDateTime} from "@/utils/date";
import {useWindowSize} from "@vueuse/core";

const {app, web} = useStore();
const {width, height} = useWindowSize();

const showNum = ref(3);
const quizList = ref<QuizRecommend[]>([]);
const avatar = computed(() => (cover: string) => 'background:url(' + cover + ')');

watchEffect(() => {
    // 监听屏幕宽度，卡片数量变化
    let remWidth = width.value / 54;
    if (remWidth < 17) {
        showNum.value = 1;
    } else if (remWidth < 25) {
        showNum.value = 2;
    } else {
        showNum.value = 3;
    }
});
onMounted(() => {
    getQuizRecommend().then(({data}) => {
        quizList.value = data.data;
    });
});
</script>

<style scoped lang="scss">

.recommend-quiz-box {
  width: 96%;
  height: 7rem;
  margin: 0 auto;

  .quiz-item {
    position: relative;
    padding: 0.2rem;
    width: 8rem;
    height: 2rem;
    margin: 2rem auto;
    transition: .5s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

    &:active {
      height: 5.35rem;
      margin: 1rem auto;
      transform: perspective(40rem) rotateY(360deg);
      transform-origin: center;
    }

    .title {
      position: absolute;
      top: 0.3rem;
      left: 1.5rem;
      width: calc(100% - 2rem);
    }

    .text {
      padding: 0 0.3rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      width: 100%;
      height: calc(100% - 2rem);
    }

    .time {
      position: absolute;
      bottom: 0.2rem;
      right: 0.3rem;
      background: var(--main-2);
      border-radius: 0.1rem;
      padding: 0.1rem 0.2rem;
      box-shadow: 0 0 0.1rem var(--box-shadow);
    }
  }
}
</style>